<template>
  <div class="foot" v-show="isshow">
    <div class="footLeft">
      <input
        type="checkbox"
        v-model="isAll"
        ref="checkBox"
      />
      <span>已完成{{ succ }}/全部{{ total }}</span>
    </div>
    <div class="footRight">
      <button @click="emptyFinish">清空已完成</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'foot',
  data() {
    return {
      todoList: []
    }
  },
  created() {
    // 接收到了兄弟组件List发送来的数据，并且赋值给todoList
    this.$bus.$on('footList', (list) => {
      console.log('传过来的值', list)
      this.todoList = list
    })
    console.log('重新赋值的list', this.todoList)
  },
  computed: {
    // 利用计算属性计算出已完成的
    succ() {
      let newTodo = this.todoList.filter((todo) => {
        return todo.isCheck === true
      })
      console.log(newTodo)
      return newTodo.length
    },
    // 利用计算属性计算出总共的
    total() {
      return this.todoList.length
    },
    // 利用计算属性计算出是否全选，并且点击的时候与v-model绑定，利用中央事件总线发送给list组件
    isAll: {
      get(){
        return this.succ === this.total
      },
      set(checked){
        this.$bus.$emit('emitChecked', checked)
      }

    },
    // 利用计算属性计算出数据的总长度，如果小于等于0就隐藏foot组件
    isshow() {
      return this.todoList.length > 0
    }
  },
  methods: {
    // 不利用v-model来发送是否全选给list组件
    checkAll() {
      console.log(this.$refs.checkBox.checked)
      this.$bus.$emit('emitChecked', this.$refs.checkBox.checked)
    },
    // 点击清空已完成发送事件给list组件
    emptyFinish() {
      console.log(this.todoList)
      let newTodo = this.todoList.filter(todo => {
        return todo.isCheck == true
      })
      console.log('新的todo', newTodo)
      if (newTodo.length > 0) {
        if (confirm('确定清空吗？'))
          this.$bus.$emit('emptyFinsish')
      } else {
        alert('你还没有完成的任务')
      }

    }
  }
}
</script>

<style lang="less" scoped>
.foot {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foot .footRight button {
  background-color: red;
  color: #fff;
  border: none;
}
.foot input {
  margin-right: 20px;
}
</style>